<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>启元审批通过率情况</title> 

<style type="text/css">
*{ margin:0px; padding:0px;}
 #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
 ul{ list-style:none;}
 ul li{ float:left;  line-height:40px; text-align:center; position:relative;}
 a{ text-decoration:none; color:#000; display:block; width:90px;}
 a:hover{ color:#FFF; background-color:#666;}
 ul li ul li{ float:none; border-left:none; margin-top:2px; background-color:#eee; } 
 ul li ul{  width:90px; position:absolute; left:0px; top:40px; display:none;}

</style>
<script type="text/javascript" src="/static/js/jquery-1.9.1.js"></script>

<script type="text/javascript">
  $(function(){
	 $(".navmenu").mouseover(function(){
		 $(this).children("ul").show();
		 
		 
		 })
	 $(".navmenu").mouseout(function(){
		 
		 $(this).children("ul").hide();
		 
		 })
	  
	  })
  
</script>


<style type="text/css">
.day{
    height:500px;
    width:1200px;
    border:green solid 2.2px;
    margin:0 auto;
    top: 150px;
    left: 0px;
    right: 0px;
    bottom: 10px;
    margin-top:50px;#设置两个div之间间距
    margin-bottom:60px;#设置两个div之间间距
    position:absolute;
}
</style>


</head>  
  
<body> 
<div id="menu">
   <ul>
   
  <li><a href="#">启元首页</a></li>
  <li class="navmenu"><a href="#">运营数据</a>
      <ul>  
         <li><a href="http://172.16.3.119:9999/Oper/approvalPassRate">审批通过率</a></li>
         <li><a href="#">进件量</a></li>
         <li><a href="#">平均放款额</a></li>
         <li><a href="#">放款额</a></li>
      </ul>

  </li>
  <li class="navmenu"><a href="#">风控数据</a>
      <ul>
         <li><a href="#">账龄分析</a></li>
      </ul>
  </li>
  <li class="navmenu"><a href="#">财务数据</a>
      <ul>
         <li><a href="#">客户还款表</a></li>
      </ul>
  </li>
  <li class="navmenu"><a href="#">关于我们</a></li>
  
</ul>
</div>

<div id="month" class='day'></div>
<div id="day" class='day'></div> 
<script type="text/javascript" src="/static/js/jquery-1.9.1.js"></script>  
<script type="text/javascript" src="/static/js/echarts.js"></script>  
<script type="text/javascript" src="/static/js/china.js"></script> 

 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->        
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('month'));  

		function randomData() {
			return Math.round(Math.random()*1000);
		}
        
        var dateStr = "{{ data['month']['x'] }}";
        var xAxisList = dateStr.split(';');
        var xAxisData = [];

        xAxisList.forEach(function (element) {
            xAxisData.push(element);
        });
        
		option = {
            dataZoom: [
                    {
                        type: 'slider',
                        xAxisIndex: 0,
                        start: 0,
                        end: 100
                    },
                    {
                        type: 'inside',
                        xAxisIndex: 0,
                        start: 0,
                        end: 100
                    }
                ],  
            tooltip: {
                trigger: 'axis'
            },
            title: {
				text: '审批通过率趋-月',
				subtext: '',
				left: 'left'
			},  
            legend: {
                data:['审批通过率(%)']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxisData
            },
            yAxis: {
                type: 'value',
                max: 110
            },
            series: [
                {
                    name:'审批通过率(%)',
                    type:'line',
                    //stack: '总量',
                    data:{{ data['month']['y'] }}
                }             
            ]
        };
        // 使用刚指定的配置项和数据显示图表。  
        myChart.setOption(option);   
    </script>  
    
    
 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->        
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('day'));  

		function randomData() {
			return Math.round(Math.random()*1000);
		}
        
        var dateStr = "{{ data['day']['x'] }}";
        var xAxisList = dateStr.split(';');
        var xAxisData = [];

        xAxisList.forEach(function (element) {
            xAxisData.push(element);
        });
        
		option = {
            dataZoom: [
                    {
                        type: 'slider',
                        xAxisIndex: 0,
                        start: 0,
                        end: 100
                    },
                    {
                        type: 'inside',
                        xAxisIndex: 0,
                        start: 0,
                        end: 100
                    }
                ],  
            tooltip: {
                trigger: 'axis'
            },
            title: {
				text: '审批通过率趋-日',
				subtext: '',
				left: 'left'
			},  
            legend: {
                data:['审批通过率(%)']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxisData
            },
            yAxis: {
                type: 'value',
                max: 110
            },
            series: [
                {
                    name:'审批通过率(%)',
                    type:'line',
                    //stack: '总量',
                    data:{{ data['day']['y'] }}
                }             
            ]
        };
        // 使用刚指定的配置项和数据显示图表。  
        myChart.setOption(option);   
    </script>  
  

</body>  
</html>